<template>
  <div>
    <h1>分类界面</h1>
    <p>当前分类 ID: {{ categoryId }}</p>
    <!-- 展示分类数据 -->
    <div v-if="categoryData">
      <h2>{{ categoryData.t_name }}</h2>
      <img :src="categoryData.t_img" alt="分类图片" />
      <!-- 展示该分类下的商品 -->
      <h3>该分类下的商品</h3>
      <ul>
        <li v-for="lianjie in lianjieList" :key="lianjie.id" @click="navigateToProductDetail(lianjie.id)">
          <h4>{{ lianjie.l_name }}</h4>
          <p>价格: {{ lianjie.l_money }}</p>
          <img :src="lianjie.l_img" alt="商品图片" />
        </li>
      </ul>
    </div>
    <div v-else>
      <p>正在加载数据...</p>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import { ref, computed, onMounted } from 'vue';
import http from "../../http/index";

const route = useRoute();
const router = useRouter();
const categoryId = route.params.categoryId;
const categoryData = ref(null);
const lianjieList = ref([]);

// 根据 categoryId 获取分类数据
const getCategoryData = async () => {
  try {
    const response = await http.get(`/home/tag/${categoryId}/`);
    categoryData.value = response.data;

    // 获取该分类下的商品数据
    const lianjieResponse = await http.get(`/home/lianjie/?l_tag=${categoryId}`);
    lianjieList.value = lianjieResponse.data;
  } catch (error) {
    console.error('获取分类数据失败:', error);
  }
};

// 跳转到商品详情页
const navigateToProductDetail = (productId) => {
  router.push({ name: 'ProductDetail', params: { productId } });
};

// 初始化加载数据
onMounted(() => {
  getCategoryData();
});
</script>

<style scoped>
/* 样式 */
</style>